<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    组件的概念：
      将页面中某个部分的 结构、样式、逻辑 给抽离成一个单独的个体，方便后续使用与复用，这就是组件。

    组件的使用：
      
      1. 定义组件
      2. 注册组件
        1. 注册全局组件
          调用 应用实例（app、createApp）的 component 方法来全局注册
          app.component('组件的名字', 组件的定义)
        2. 注册局部组件
      3. 使用组件
        将组件的名字，当成自定义标签使用即可。

    定义组件：
      就是定义一个包含有特殊选项的对象即可。data、methods、computed、watch
   -->

    <div id="app">
      <!-- 使用组件 -->
      <my-header></my-header>
      <hr />
      <my-header></my-header>
      <hr />

      <my-footer></my-footer>
    </div>

    <script src="../lib/vue-3.js"></script>
    <script>
      // 定义一个 Header 组件
      const Header = {
        // 模板、html结构
        template: `
          <header>
            我是 Header - {{ title }}
            <button @click="add">{{ count }}</button>
          </header> 
        `,

        // 当前 Header 组件自己的状态数据
        data() {
          return {
            title: "组件",
            count: 10,
          };
        },

        methods: {
          add() {
            this.count++;
          },
        },
      };

      // 定义一个 Footer 组件
      const Footer = {
        // Component is missing template or render function
        //  一个组件必须要有 template 或者 render 函数，这两个配置都是描述组件长什么样子的。
        //  一般我们都是使用 template 配置，Vue内部编译模板时，会将 template 配置的内容转换成 render 函数。
        //  两个都配置了的话，以 render 函数为主。

        template: `
          <div>
            <span>Footer</span>
            <button>点我</button>
          </div>
        `,

        // render: function () {
        //   const vSpan = Vue.h("span", null, "Footer");
        //   const vBtn = Vue.h("button", null, "点我");
        //   const vDiv = Vue.h("div", null, [vSpan, vBtn]);
        //   return vDiv;
        // },

        // render: function () {
        //   // 要返回 h 函数创建的虚拟DOM
        //   const vNode = Vue.h("button", null, "Footer");
        //   // 虚拟DOM或虚拟节点，就是对真实DOM的一个抽象，抽象成一个JS对象来描述
        //   console.log("vNode", vNode);
        //   return vNode;
        // },
      };

      // 创建应用实例
      const app = Vue.createApp({});

      // 全局注册组件
      //    第一个参数：组件的名字
      //    第二个参数：组件的定义对象
      //    PS:
      //      1. 注册组件的代码，需要放在 mount 之前
      app.component("my-header", Header);
      app.component("my-footer", Footer);

      // 挂载应用
      app.mount("#app");
    </script>
  </body>
</html>
